<template>
    <el-card shadow="never">
        <template #header>
            <div class="card_header">
                <b>查看通知</b>
            </div>
        </template>

        <el-table stripe ref="multipleTableRef" :data="filterTableData" style="width: 100%;" v-loading="loading">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column label="标题" show-overflow-tooltip prop="title" width="100" />
            <el-table-column label="级别" prop="level" width="170">
                <template #default="scope">
                    <p>
                        <el-tag class="tags" :type="levelClass(item)" v-for="item in scope.row.level?.split(',')"
                            :key="item">{{ item }}</el-tag>
                    </p>
                </template>
            </el-table-column>
            <el-table-column label="发布人" width="150" prop="name">
            </el-table-column>
            <el-table-column label=" 发布时间" sortable prop="cdate" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" type="info" @click="handleCheck(scope.$index, scope.row, scope.id)">查看
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row, scope.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-pagination background hide-on-single-page :current-page="pageNum" :page-size="pageSize"
                :total="totalNum" @current-change="handlePageChange" layout="prev, pager, next"
                style="margin-bottom:10px;"></el-pagination>
            <!-- <el-button type="danger" @click="handleSelectDelete">删除</el-button> -->
            <el-button type="primary" size="small" @click="handleRefresh">刷新</el-button>
        </div>
    </el-card>
</template>


<script>
import { onBeforeMount, ref, computed } from 'vue'
import { ElMessageBox, ElNotification, ElMessage } from "element-plus"
import { notifyService } from "../../interfaces/service"

export default {
    components: {},
    setup() {


        onBeforeMount(() => {
            loadTableData();
        })

        const loading = ref(false)

        const loadTableData = () => {
            let data = {
                "pageSize": pageSize.value,
                "pageNum": pageNum.value,
            };
            loading.value = true
            notifyService.getNotifies(data)
                .then(res => {
                    loading.value = false
                    if (res.code == 0) {
                        let list = res.data.list
                        let total_num = res.data.totalNum
                        totalNum.value = total_num
                        tableData.value = list
                    } else {
                        ElMessage.error(res.message)
                    }
                })
        }

        const tableData = ref([])

        const search = ref('')
        const filterTableData = computed(() =>
            tableData.value.filter(
                (data) =>
                    !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
            )
        )

        const handleCheck = (index, row, id) => {
            ElNotification({
                title: row.title,
                message: `<div><p style="font-size:9px;color:#bcbcbc;">${row.name}</p><pre>${row.content}</pre></div>`,
                dangerouslyUseHTMLString: true,
            })
        }

        const delConfig = [
            "确定删除?",
            "提示",
            {
                confirmButtonText: '删除',
                confirmButtonClass: "del-confirm-button",
                cancelButtonText: '取消',
                type: 'error',
                draggable: true
            }
        ]

        const handleDelete = (index, row, id) => {
            ElMessageBox.confirm(...delConfig).then(() => {
                notifyService.delNotify({ id: `${row.id}` })
                    .then(res => {
                        if (res.success) {
                            ElMessage.success("删除成功")
                            loadTableData()
                        }
                    })
            })
        }

        const handleRefresh = () => {
            loadTableData();
        }


        // 分页组件
        const pageNum = ref(1)
        const pageSize = ref(10)
        const totalNum = ref(10)
        // 当前页改变事件
        const handlePageChange = (n) => {
            pageNum.value = n
            loadTableData()
        }

        // 名称样式
        const typeClass = (obj) => {
            if (!obj) return;

            let type_class_name = '';
            if (obj.type === "ACCOUNT") {
                type_class_name = "type_account"
            }
            else if (obj.type === "TEACHER") {
                type_class_name = "type_teacher"
            }
            return type_class_name;
        }

        const items =
        {
            '紧急': 'danger',
            '提示': 'warning',
            '信息': '',
        }

        // 等级样式
        const levelClass = (key) => {
            if (!key) return;
            for (const name of Object.keys(items)) {
                if (name === key) {
                    return items[name];
                }
            }
        }


        return {

            filterTableData,
            pageNum,
            pageSize,
            totalNum,
            loading,
            typeClass,
            levelClass,
            handleCheck,
            handleDelete,
            handlePageChange,
            handleRefresh,
        }
    }
}
</script>


<style lang="scss" scoped>
.type_account {
    color: red;
}

.type_teacher {
    color: blue;
}

.tags:not(:last-child) {
    margin-right: 5px;
}
</style>